import React, {useState, useContext, createContext} from 'react'

// 1. 需要引入useContext createContext 两个内容
// 2. 通过createContext创建一个context句柄
// 3. Context.Provider来确定数据共享范围
// 4. 通过value来分发内容
// 5. 在子组件中，通过useContext(context句柄)来获取数据
const Context = createContext(null)

function StateFunction() {
  const [num, setNum] = useState(1)


  return <div onClick={()=>{setNum((num)=>num+1)}}>
    这是一个MemoFunction函数组件-{num}
    <Context.Provider value={num}>
      <Item1 num={num}></Item1>
      <Item2 num={num}></Item2>
    </Context.Provider>
    
  </div>
}

function Item1 (props) {
  const num2 = useContext(Context)
  console.log('Item1 num: ' + num2)
  return <div>
    子组件1 num: {num2}
  </div>
}

function Item2 (props) {
  const num = useContext(Context)
  console.log('Item2 num: ' + num)
  return <div>
    子组件2 num: {num + 2}
  </div>
}

export default StateFunction